<!-- 登录表单组件 -->
<template>
  <div>
    <a-form-model
      :rules="loginRules"
      ref="loginForm"
      :model="formLogin"
      @submit="formSubmit"
      @submit.native.prevent
    >
      <a-form-model-item prop="userName">
        <a-input
          v-model="formLogin.userName"
          name="userName"
          placeholder="请输入用户编码"
          autocomplete="on"
          @pressEnter="loginSubmit"
        >
          <a-icon slot="prefix" type="user" style="color:#333" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop="password">
        <a-input-password
          v-model="formLogin.password"
          name="password"
          placeholder="请输入密码"
          @pressEnter="loginSubmit"
        >
          <a-icon slot="prefix" type="lock" style="color:#333" />
        </a-input-password>
      </a-form-model-item>
      <!-- <a-form-model-item>
                <a-button type="primary" htmlType="submit" style="width:100%;margin-bottom: 17px;">立即登录</a-button>
            </a-form-model-item> -->
    </a-form-model>

    <div>
      <a-button
        type="primary"
        htmlType="submit"
        style="width:100%;margin-bottom: 17px;"
        @click="loginSubmit"
        >立即登录
      </a-button>
    </div>

    <div class="flexBetweenCenter">
      <div class="flexStartCenter">
        <a-checkbox @change="rememberChange" :checked="this.rememberFlag" style="font-size:12px;color:#333">
          记住账号
        </a-checkbox>
      </div>
      <div class="flexStartCenter" style="color:#1890ff;font-size:12px">
        <div style="margin-right:15px;cursor:pointer" @click="toRegister">
          立即注册
        </div>
        <div style="cursor:pointer" @click="toForget">
          忘记密码
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginForm",
  data() {
    return {
      rememberFlag: true,
      formLogin: {
        userName: "",
        password: ""
      },
      loginRules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "change" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "change" }]
      }
    };
  },
  methods: {
    loginSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.formSubmit();
        } else {
          return false;
        }
      });
    },

    formSubmit() {
      if (this.rememberFlag) {
        localStorage.setItem("IamLoginData", JSON.stringify(this.formLogin));
      } else {
        localStorage.setItem("IamLoginData", null);
      }
      this.$emit("submit", this.formLogin);
    },
    rememberChange(event) {
      // console.log(event.target.checked);
      this.rememberFlag = event.target.checked;
    },
    toRegister() {
      // this.$router.push({ path: "/register" });
    },
    toForget() {
      // this.$router.push({ path: "/forgetPassword" });
    }
  },
  created() {
    if (JSON.parse(localStorage.getItem("IamLoginData"))) {
      this.formLogin = JSON.parse(localStorage.getItem("IamLoginData"));
    }
  },
  mounted() {},
  destroyed() {}
};
</script>

<style scoped>
.flexStartCenter {
  display: flex;
  align-items: center;
}

.flexBetweenCenter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
